<template>
  <div>
    <div class="form">
        <!-- 游戏区服 -->
        <div class="form-item">
            <text class="label">游戏区服</text>
            <el-cascader placeholder="请选择您所在的区服" v-model="formData.selectedServer" :options="serverTree"
                style="width: 200px;margin-bottom: 10px;" />
            <!-- <div class="handle" @click="showServerPicker">
                <view class="selected-tag">
                    {{ `${serverTree[selectedGroupIndex].text}/${selectedServer}` || '请选择您所在的区服' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>

        <!-- 代练类型 -->
        <div class="form-item">
            <text class="label">陪练类型</text>
            <el-select v-model="formData.mode" placeholder="请选择陪练类型" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in modeTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showModePicker">
                <view class="selected-tag">
                    {{ mode || '请选择代练类型' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>


        <!-- 代练任务 -->
        <div class="form-item" v-if="formData.mode != '场次' && formData.mode != '女神陪练'">
            <text class="label">代练任务</text>
            <el-cascader placeholder="请选择当前段位" v-model="formData.currentTask" :options="Task"
                style="width: 200px;margin-bottom: 10px;" />
            <el-cascader placeholder="请选择目标段位" v-model="formData.toTask" :options="Task"
                style="width: 200px;margin-bottom: 10px;" />
            <!-- <div class="handle" @click="showCurrentTaskTypePicker">
                <view class="selected-tag">

                    {{ (currentTask === '' && toTask === '') ? '请选择当前段位和目标段位' :
                        `${currentTask}-${toTask}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 场次选择 -->
        <div class="form-item" v-if="formData.mode == '场次'">
            <text class="label">场次选择</text>
            <el-select v-model="formData.session" placeholder="请选择需要陪练的场次" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in sessionTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showSessionPicker">
                <view class="selected-tag">

                    {{ (session === '') ? '请选择需要陪练的场次' :
                        `${session}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 时长选择 -->
        <div class="form-item" v-if="formData.mode == '女神陪练'">
            <text class="label">时长选择</text>
            <el-select v-model="formData.duration" placeholder="请选择需要陪练的时长" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in durationTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showDurationPicker">
                <view class="selected-tag">

                    {{ (duration === '') ? '请选择需要陪练的时长' :
                        `${duration}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 当前段位 -->
        <div class="form-item" v-if="formData.mode == '场次' || formData.mode == '女神陪练'">
            <text class="label">当前段位</text>
            <el-cascader placeholder="请选择当前段位" v-model="formData.currentTask" :options="Task"
                style="width: 200px;margin-bottom: 10px;" />
            <!-- <div class="handle" @click="showCurrentTaskTypePicker">
                <view class="selected-tag">

                    {{ (currentTask === '') ? '请选择角色当前的段位' :
                        `${currentTask}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 游戏角色 -->
        <div class="form-item" v-if="showOrder">
            <text class="label">游戏角色</text>
            <el-input v-model="formData.username" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的游戏角色名" />
        </div>
        <!-- 号主手机（必填） -->
        <div class="form-item" v-if="showOrder">
            <text class="label">号主手机（必填）</text>
            <el-input v-model="formData.phone" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的手机号" />
        </div>
    </div>

    <!-- 游戏区服选择弹窗 -->
    <el-dialog v-model="formData.serverPopup" title="请选择游戏区服" width="1000" :before-close="hideServerPicker">
        <div class="popup-content">
            <div class="body">
                <!-- 左侧导航栏 -->
                <div class="popup-nav">
                    <div v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                        :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                        {{ group.text }}
                    </div>
                </div>

                <!-- 右侧选择内容 -->
                <div class="popup-scroll">
                    <div v-if="selectedGroupIndex !== null" class="popup-group">
                        <div v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                            class="popup-item" @click="selectServerItem(item)">
                            {{ item.text }}
                        </div>
                    </div>
                    <div v-else class="popup-empty">请选择左侧分类</div>
                </div>
            </div>
        </div>
    </el-dialog>

    <!-- 代练类型选择弹窗 -->
    <el-dialog v-model="modePopup" width="1000" :before-close="hideModePicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in modeTree" :key="index" class="popup-item" @click="selectModeItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>

    <!-- 时长选择器弹窗 -->
    <el-dialog v-model="durationPopup" width="1000" :before-close="hideDurationPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in durationTree" :key="index" class="popup-item"
                    @click="selectDurationItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>

    <!-- 场次选择器弹窗 -->
    <el-dialog v-model="sessionPopup" width="1000" :before-close="hideSessionPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in sessionTree" :key="index" class="popup-item"
                    @click="selectSessionItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>


    <!-- 当前段位选择弹窗 -->
    <el-dialog v-model="currentTaskTypePopup" title="请选择当前段位" width="1000" :before-close="hideCurrentTaskTypePicker">
        <view class="popup-content">
            <div class="body">
                <!-- 左侧导航栏 -->
                <div scroll-y class="popup-nav">
                    <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                        :class="{ active: currentTaskGroupIndex === groupIndex }"
                        @click="selectCurrentTaskGroup(groupIndex)">
                        {{ group.text }}
                    </view>
                </div>

                <!-- 右侧选择内容 -->
                <div scroll-y class="popup-scroll">
                    <view v-if="currentTaskGroupIndex !== null" class="popup-group">
                        <view v-for="(item, itemIndex) in Task[currentTaskGroupIndex].children" :key="itemIndex"
                            class="popup-item">
                            <div class="popup-item-title">{{ item.text }}</div>
                            <div class="popup-item-body">
                                <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                    @click="selectCurrentTaskItem(item.text, item2.text)" class="popup-item-body-item">
                                    <span>{{ item2.text }}</span>
                                </view>
                            </div>
                        </view>
                    </view>
                    <view v-else class="popup-empty">请选择左侧分类</view>
                </div>
            </div>
        </view>
    </el-dialog>
    <!-- 目标段位选择弹窗 -->
    <el-dialog v-model="toTaskTypePopup" title="请选择目标段位" width="1000" :before-close="hideToTaskTypePicker">
        <view class="popup-content">
            <div class="body">
                <!-- 左侧导航栏 -->
                <div scroll-y class="popup-nav">
                    <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                        :class="{ active: toTaskGroupIndex === groupIndex }" @click="selectToTaskGroup(groupIndex)">
                        {{ group.text }}
                    </view>
                </div>

                <!-- 右侧选择内容 -->
                <div scroll-y class="popup-scroll">
                    <view v-if="toTaskGroupIndex !== null" class="popup-group">
                        <view v-for="(item, itemIndex) in Task[toTaskGroupIndex].children" :key="itemIndex"
                            class="popup-item">
                            <div class="popup-item-title">{{ item.text }}</div>
                            <div class="popup-item-body">
                                <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                    @click="selectToTaskItem(item.text, item2.text)" class="popup-item-body-item">
                                    <span>{{ item2.text }}</span>
                                </view>
                            </div>
                        </view>
                    </view>
                    <view v-else class="popup-empty">请选择左侧分类</view>
                </div>
            </div>
        </view>
    </el-dialog>
    <!-- 订单信息区域 -->
    <!-- <div class="orderMsg">
        <div class="pay">
            <img src="../../assets/icons/pay.png"></img>
            <div class="text">建议出价 <span style="color: red;">87元</span></div>
        </div>
        <div class="time">
            <img src="../../assets/icons/time.png"></img>
            <div class="text">预计时限 <span style="color: red;">47小时</span></div>
        </div>
    </div> -->
    <!-- 底部按钮 -->
    <!-- <div class="footer">
        <div class="button" @click="submitOrder()">下一步</div>
    </div> -->
    <div class="special-task" @click="changeShowOrder" v-if="!showOrder">
        <div class="label">预约下单</div>
    </div>
    <PLWZsubmitOrder v-if="showOrder" :formDataInput="formData"></PLWZsubmitOrder>
  </div>
</template>
<script>
import PLWZsubmitOrder from '../../views/PL/WZsubmitOrder/index.vue';

export default {
    name: 'WZPL',
    components: {
        PLWZsubmitOrder
    },
    data() {
        return {
            showOrder: false,
            // 区服数据
            serverTree: [
                {
                    label: '安卓QQ',
                    value: "安卓QQ",
                    children: [
                        { label: '默认服', value: "默认服" },
                        { label: '手Q抢先服', value: "手Q抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            label: `手Q${i + 1}区`,
                            value: `手Q${i + 1}区`
                        })).slice(1)
                    ]
                },
                {
                    label: '安卓WX',
                    value: "安卓WX",
                    children: [
                        { label: '默认服', value: "默认服" },
                        { label: '微信抢先服', value: "微信抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            label: `微信${i + 1}区`,
                            value: `微信${i + 1}区`
                        })).slice(1)
                    ]
                },
                {
                    label: '苹果QQ',
                    value: "苹果QQ",
                    children: [
                        { label: '默认服', value: "默认服" },
                        { label: '手Q抢先服', value: "手Q抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            label: `手Q${i + 1}区`,
                            value: `手Q${i + 1}区`
                        })).slice(1)
                    ]
                },
                {
                    label: '苹果WX',
                    value: "苹果WX",
                    children: [
                        { label: '默认服', value: "默认服" },
                        { label: '微信抢先服', value: "微信抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            label: `微信${i + 1}区`,
                            value: `微信${i + 1}区`
                        })).slice(1)
                    ]
                },
            ],
            selectedServer: "默认服",
            selectedGroupIndex: 0,
            serverPopup: false,
            // 陪练类型数据
            modeTree: [
                { text: '段位', value: "段位" },
                { text: '场次', value: "场次" },
                { text: '女神陪练', value: "女神陪练" },
            ],
            mode: "段位",
            modePopup: false,
            // 时长数据
            durationTree: [
                { text: '2小时', value: "2小时" }, { text: '3小时', value: "3小时" }, { text: '4小时', value: "4小时" },
                { text: '5小时', value: "5小时" }, { text: '6小时', value: "6小时" }, { text: '7小时', value: "7小时" },
                { text: '8小时', value: "8小时" }, { text: '9小时', value: "9小时" }, { text: '10小时', value: "10小时" }
            ],
            duration: "",
            durationPopup: false,
            // 场次数据
            sessionTree: [
                { text: '1场', value: "1场" }, { text: '2场', value: "2场" }, { text: '3场', value: "3场" },
                { text: '4场', value: "4场" }, { text: '5场', value: "5场" }, { text: '6场', value: "6场" },
                { text: '7场', value: "7场" }, { text: '8场', value: "8场" }, { text: '9场', value: "9场" },
                { text: '10场', value: "10场" }
            ],
            session: "",
            sessionPopup: false,
            // 段位任务数据
            Task: [],
            currentTask: "",
            currentTaskGroupIndex: 0,
            currentTaskTypePopup: false,
            toTask: "",
            toTaskGroupIndex: 0,
            toTaskTypePopup: false,
            // 订单提交数据
            formData: {
                server: '',
                mode: '',
                currentTask: '',
                toTask: '',
                session: '',
                duration: '',
                username: '',
                phone: '',
                // Added missing fields from template
                selectedServer: '', // For el-cascader binding
            },
        };
    },
    methods: {
        changeShowOrder() {
            this.showOrder = !this.showOrder;
        },
        // 区服选择
        showServerPicker() {
            this.formData.serverPopup = true;
        },
        hideServerPicker() {
            this.formData.serverPopup = false;
        },
        selectGroup(index) {
            this.selectedGroupIndex = index;
        },
        selectServerItem(item) {
            this.selectedServer = item.text;
            this.hideServerPicker();
        },
        // 陪练类型选择
        showModePicker() {
            this.modePopup = true;
        },
        hideModePicker() {
            this.modePopup = false;
        },
        selectModeItem(item) {
            this.mode = item.text;
            this.hideModePicker();
        },
        // 时长选择
        showDurationPicker() {
            this.durationPopup = true;
        },
        hideDurationPicker() {
            this.durationPopup = false;
        },
        selectDurationItem(item) {
            this.duration = item.text;
            this.hideDurationPicker();
        },
        // 场次选择
        showSessionPicker() {
            this.sessionPopup = true;
        },
        hideSessionPicker() {
            this.sessionPopup = false;
        },
        selectSessionItem(item) {
            this.session = item.text;
            this.hideSessionPicker();
        },
        // 段位任务
        createTaskList() {
            const tiers = ['青铜', '白银', '黄金', '铂金', '钻石', '王者'];
            const taskList = [];
            tiers.forEach(tier => {
                let tierItem = { label: tier, value: tier, children: [] };
                for (let i = 5; i >= 1; i--) {
                    let subTierItem = { label: `${tier}${i}`, value: `${tier}${i}`, children: [] };
                    const stars = Array.from({ length: 6 }, (_, index) => ({ label: `${index}星`, value: `${index}星` }));
                    subTierItem.children = stars;
                    tierItem.children.push(subTierItem);
                }
                taskList.push(tierItem);
            });
            this.Task = taskList;
        },
        selectCurrentTaskGroup(index) {
            this.currentTaskGroupIndex = index;
        },
        selectCurrentTaskItem(text1, text2) {
            this.currentTask = `${text1} ${text2}`;
            this.hideCurrentTaskTypePicker();
            if (this.mode !== '场次' && this.mode !== '女神陪练') {
                this.showToTaskTypePicker();
            }
        },
        showCurrentTaskTypePicker() {
            this.currentTaskTypePopup = true;
        },
        hideCurrentTaskTypePicker() {
            this.currentTaskTypePopup = false;
        },
        selectToTaskGroup(index) {
            this.toTaskGroupIndex = index;
        },
        selectToTaskItem(text1, text2) {
            this.toTask = `${text1} ${text2}`;
            this.hideToTaskTypePicker();
        },
        showToTaskTypePicker() {
            this.toTaskTypePopup = true;
        },
        hideToTaskTypePicker() {
            this.toTaskTypePopup = false;
        },
        // 订单提交
        submitOrder() {
            const currentServerOption = this.serverTree[this.selectedGroupIndex];
            this.formData = {
                ...this.formData, // Preserve username, phone etc.
                server: currentServerOption ? `${currentServerOption.label}/${this.selectedServer}` : '',
                mode: this.mode,
                currentTask: this.currentTask,
                toTask: this.toTask,
                session: this.session,
                duration: this.duration,
            };

            console.log("提交订单", this.formData);
            this.$router.push({
                path: "/PL/WZsubmitOrder",
                query: { formData: JSON.stringify(this.formData) }
            });
        }
    },
    mounted() {
        this.createTaskList();
    }
};
</script>
<style scoped>
:deep(.el-input__wrapper) {
    height: 45px;
}
.special-task {
    width: 40%;
    border-radius: 16px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    /* margin-top: 5px; */
    /* padding: 20px; */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin: 50px auto;
    /* margin-left: 20px; */
}


.special-task .label {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    background-color: #6041e9;
    color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 16px;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.special-task .label:hover {
    cursor: pointer;
    background-color: #3105f8;
}
/* 表单样式 */
.form {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    padding: 24px 32px;
    background: #fff;
}

.form-item {
    width: 20%;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 16px;
    box-sizing: border-box;
}

.form-item .label {
    width: 100%;
    height: 100%;
    display: block;
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
}

.form-item .handle {
    width: 70%;

}

.picker,
.input {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: #666;
}

.selected-tag img {
    width: 24px;
    height: 24px;
    margin-left: 20px;
}

.input-group {
    display: flex;
    gap: 20px;
}

.input-group input {
    flex: 1;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    border: 1px solid #ccc;
}

.dual-picker {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tier-picker {
    flex: 1;
    position: relative;
}

.tier-picker::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.arrow {
    color: #666;
    font-size: 40px;
}

.picker {
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    background-color: #fff;
}

.picker::placeholder {
    color: #999;
}

/* 输入框聚焦样式 */
input:focus {
    border-color: #388aff;
    box-shadow: 0 0 10px rgba(26, 160, 53, 0.1);
}

/* 弹窗样式 */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
}

.time-selector {
    display: flex;
    align-items: center;
}

.time-scroll {
    overflow-y: auto;
    height: 500px;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.time-scroll .date-display {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #333;
    padding: 30px 0;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item {
    cursor: pointer;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 32px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item.selected {
    color: #4080ff;
    font-weight: bold;
}

.time-scroll .time-item:last-child {
    border-bottom: none;
}

.level,
.role {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    font-size: 20px;
    box-sizing: border-box;
}

.level input,
.role input {
    width: 70%;
    outline: none;
    border: none;
    font-size: 20px;
}

.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 20px;
}

.popup-content .body {
    display: flex;
    height: 500px;
}

.popup-nav {
    display: flex;
    flex-direction: column;
    width: 200px;
    /* 根据需要调整宽度 */
    border-right: 1px solid #eee;
    padding: 20px 0;
}

.nav-item {
    padding: 20px;
    font-size: 20px;
    color: #666;
    cursor: pointer;
}

.nav-item.active {
    color: #388aff;
    font-weight: bold;
    border-left: 4px solid #388aff;
    padding-left: 16px;
}

.popup-scroll {
    flex: 1;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    max-height: 500px;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-item {
    padding: 20px;
    font-size: 20px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-item-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-left: 20px;
}

.popup-item-body {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 20px;
}

.popup-item-body .popup-item-body-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    padding: 20px;
    border: 1px solid #aaa;
    border-radius: 7px;
    box-sizing: border-box;
    margin-left: 20px;
    margin-top: 20px;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28px;
    color: #999;
}

.popup-group {
    margin-bottom: 20px;
    max-height: 100%;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 20px;
    text-align: center;
    font-size: 28px;
    box-sizing: border-box;

}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.orderMsg {
    width: 100%;
    display: flex;
    padding: 40px;
    box-sizing: border-box;
    padding-bottom: 200px;
}

.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orderMsg .pay img,
.orderMsg .time img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 20px;
    font-weight: 700;
}

.footer {
    width: 60%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    font-size: 25px;
}

.footer .tip {
    width: 100%;
    color: #aaa;
    background-color: #eee;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .button {
    width: 100%;
    height: 100px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all .3s;
}

.footer .button:hover {
    background: #3e91ff;
    cursor: pointer;
}
</style>